<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // js 为什么会有异步？js是单线程 ，同一时刻 只干一件事。
    // js 任务 同步和异步
    // 同步任务 依次执行 ，异步任务 不是按照顺序执行 ；

    // console.log(111);
    // setTimeout(()=>{
    //     console.log(222);
    // })
    // console.log(333);
    // setTimeout(()=>{
    //     console.log(4444);
    // })


    // 需求，需要异步之后执行一些事情 
    // console.log(111)
    // setTimeout(() => {
    //     console.log("setTimeout");
    // }, 1000);
    // console.log(222);
    // console.log("异步之后执行的代码");  // 不是异步代码执行完毕之后执行的代码
    // import syncFn from './syncFn.js';
    // // 回调 函数 
    // syncFn(function(){
    //     console.log("异步之后执行的代码");
    // });


    // 多个回调；

    function fn1 (cb) {
      setTimeout(() => {
        console.log("fn1");
        cb();
      }, 1000);
    }

    function fn2 (cb) {
      setTimeout(() => {
        console.log("fn2");
        cb();
      }, 1000);
    }

    function fn3 (cb) {
      setTimeout(() => {
        console.log("fn3");
        cb();
      }, 1000);
    }

    // 需要 3个函数依次执行？？
    // fn1();
    // fn2();
    // fn3();
    // 回调地狱 ：回调函数出现层层嵌套
    // 可读性差 ，可维护性差 
    // 如果有错误 ，没法定位及捕捉
    // 解决回调地狱的问题 1.观察者模式  2. ES6： promise
    fn1(function () {
      console.log("fn1执行完毕了");
      fn2(function () {
        console.log("fn2执行完毕了");
        fn3(function () {
          console.log("fn3执行完毕了");
        })
      })
    })

    // 需求 ：一个方块 从左至右移动 ，之后在向下移动，之后在向上移动，最后再回来 







  </script>
</body>

</html>